<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="echarts-gl.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
	    <script src="assets/js/lib/jquery.min.js"></script>
        <script src="assets/js/lib/jquery.nanoscroller.min.js"></script>
</head>

<body>
	
	<div id='main' style="width: 100%;height: 400px"></div>
	<div id='pie' style="width: 100%;height: 400px"></div>
	<div id='wave' style="width: 100%;height: 400px"></div>
	<div id='grid' style="width: 100%;height: 400px"></div>
		<div id='chart' style="width: 100%;height: 800px"></div>
</body>
</html>
<script type="text/javascript">
	var chart = echarts.init(document.getElementById('chart'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
var myChart=echarts.init(document.getElementById('main'),'light')
var option={
	title:{
		text:'My first echart'
	},
	tooltip:{},
	legend:{
		data:['Value']
	},
	xAxis:{
		data:["Skill","Baskedball","dress","suits","scokts"]
	},
	yAxis:{
		
	},
	series:[{
		name:'Value',
		type:'bar',
		
		data:[5,20,34,10,23]
	}]
}
myChart.setOption(option)
	var myPie=echarts.init(document.getElementById('pie'))
		myPie.setOption({
			backgroundColor: '#2c343c',
			visualMap: {
    // 不显示 visualMap 组件，只用于明暗度的映射
    show: true,
    // 映射的最小值为 80
    min: 80,
    // 映射的最大值为 600
    max: 600,
    inRange: {
        // 明暗度的范围是 0 到 1
        colorLightness: [0, 1]
    }
},
		series:[
			{
				name:'福州市VE指数南丁格尔图',
				type:'pie',
				roseType:'angle',
				radius:'55%',
				itemStyle: {
					emphasis: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.7)'
    },
    // 阴影的大小
    shadowBlur: 200,
    // 阴影水平方向上的偏移
    shadowOffsetX: 0,
    // 阴影垂直方向上的偏移
    shadowOffsetY: 0,
    // 阴影颜色
    shadowColor: 'rgba(0, 0, 250, 0.5)'
},
				data:[
					{value:1123.64,name:'晋安区'},
					{value:2323.4,name:'鼓楼区', itemStyle: { color: '#c23531' }},
					{value:1373.4,name:'台江区'},
					{value:1234.56,name:'仓山区'},
					{value:2479.23,name:'马尾区'},
					{value:1689.08,name:'旗山区'}
				],
				    labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
			}
			
		]
	})
	
	
	//Wave Chart JS:
	var myCategory=echarts.init(document.getElementById('wave'),'light')
	var baseDate= +new Date(2014,5,20);
	var oneDay=24*3600000;
	var date=[];
	var data=[Math.random()*250];
	var now=new Date(baseDate);
	function addData(shift){
		now=[now.getFullYear(),now.getMonth()+1,now.getDate()].join('/')
		date.push(now)
		data.push((Math.random()-0.4)*10+data[data.length-1])
		if(shift){
			data.shift()
			date.shift()
		}
		now=new Date(+new Date(now)+oneDay);
	}
	for(var i=1;i<100;i++){
		addData();
	}
	option={
		xAxis:{
			type:'category',
			boundaryGap:false,
			data:date
		},
		yAxis:{
			boundaryGap:[0,'50%'],
			type:'value'
		},
		series:[
			{
				name:'deal',
				type:'line',
				smooth:true,
				symbol:'none',
				stack:'a',
				areaStyle:{
					normal:{}
				},
				data:data
			}
		]
	}
	myCategory.setOption(option)
	setInterval(function(){
		addData(true)
		myCategory.setOption({
			xAxis:{
				data:date
			},
			series:[{
				name:'dael',
				data:data
			}]
		})
	},500)
	
	///WebGL JS:
	
	//正态分布数据的代码：
	function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {
    return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {
        var exponent = -(
                ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))
                + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))
            );
        return amplitude * Math.pow(Math.E, exponent);
    }.bind(null, amplitude, x0, y0, sigmaX, sigmaY);
}
// 创建一个高斯分布函数
var gaussian = makeGaussian(50, 0, 0, 20, 20);

var data2 = [];
for (var i = 0; i < 1000; i++) {
    // x, y 随机分布
    var x = Math.random() * 100 - 50;
    var y = Math.random() * 100 - 50;
    var z = gaussian(x, y);
    data2.push([x, y, z]);
}
	var my3D=echarts.init(document.getElementById('grid'),'light')
var option = {
    // 需要注意的是我们不能跟 grid 一样省略 grid3D
    grid3D: {},
    // 默认情况下, x, y, z 分别是从 0 到 1 的数值轴
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: { max: 100 },
    series: [{
        type: 'scatter3D',
        data: data2
    }]}
	my3D.setOption(option)
</script>